<template>
    <div>
        <teleport to="body">
            <!-- 蒙版 -->
            <transition name="fade">
                <div v-if="isVlible" @click="isVlible = false" class=" w-screen h-screen bg-zinc-900/70 z-40"></div>
            </transition>

            <!-- 内容 -->
            <transition name="popup-down-up">
                <div v-if="isVlible" v-bind="$attrs" class=" w-screen bg-white z-50 fixed bottom-0">
                    <slot></slot>
                </div>
            </transition>
        </teleport>
    </div>
</template>

<script setup>
import { useScrollLock, useVModel } from '@vueuse/core';
import { watch } from 'vue-demi';

const props = defineProps({
    modelValue: {
        required: true,
        type: Boolean
    }
})

// const emits = defineEmits(['update:modelValue'])
//useVModel 是一个响应式数据 当赋值改变时，会自动触发emit 自动修改值
const isVlible = useVModel(props)
// 锁定滚动
const isLocked = useScrollLock(document.body)
watch(isVlible, (val) => {
    isLocked.value = val
}, { immediate: true })
</script>

<style lang="scss" scoped>
// fade 动画
.fade-enter-active,
.fade-leave-active {
    transition: all 0.3s;
}

// 准备进入 离开完成
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.popup-down-up-enter-active,
.popup-down-up-leave-active {
    transition: all 0.3s linear;

}

.popup-down-up-enter-from,
.popup-down-up-leave-to {
    transform: translateY(100%);
}
</style>